// pages/category/category.js
// 引入封装的请求方法request
import { cjRequest } from "../../utils/service";
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    // 当前选中的index，用于判断是否添加激活的样式名
    currentIndex: 0,
    // 右侧内容的滚动条距离顶部的距离
    scrollTopWhere: 0,
  },
  // 接口的返回数据
  // 可以直接在data外设置数据，通过this.字段名直接取得
  Cates: [],
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取当前页面数据
    //  1 获取本地存储中的数据  (小程序中也是存在本地存储 技术)
    const Cates = wx.getStorageSync("cates");
    // 2 判断==》如果没有存储过，则表示没有还没有请求过
    if (!Cates) {
      // 直接发送请求获取数据
      this.getCates();
    } else {
      //storage中有数据，表示请求过
      // 有旧的数据 根据定义过期时间去判断是否过期 ===》 超过一定时间后才允许再次请求
      //? Date.now() ==》得到当前时间的【毫秒数】时间戳   可进行加减，进行比较
      //! 计算得到已经过了 10s钟了 那就可以重新发起请求了
      if (Date.now() - Cates.time > 1000 * 10) {
        // 重新发送请求
        this.getCates();
      } else {
        //还没过期，那就使用storage中存储的数据
        // 可以使用旧的数据，不发送请求，节约资源
        this.Cates = Cates.data;
        let leftMenuList = this.Cates.map((v) => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent,
        });
      }
    }
  },
  // 获取数据
  getCates () {
    cjRequest({
      url: "/categories",
    }).then((res) => {
      console.log(res);
      this.Cates = res.data.message;
      /**
         *   web: 不管存入的是什么类型的数据，最终都会先调用以下 toString(),把数据变成了字符串 再存入进去
            小程序: 不存在 类型转换的这个操作 存什么类似的数据进去，获取的时候就是什么类型
         */
      /**
         *把接口的数据存入到本地Storage存储中
          通过加入time字段，用于进行判断数据请求的间隔（数据是否过期） ==》进而决定是否重新发起请求再次获取数据，减小损耗
        */
      wx.setStorageSync("cates", {
        // Date.now() ==》得到当前时间的【毫秒数】时间戳，用于后续判断是否过期
        time: Date.now(),
        // 将请求返回的数据
        data: this.Cates,
      });

      // 构造左侧的大菜单数据
      let leftMenuList = this.Cates.map((v) => v.cat_name);
      // 构造右侧的商品数据
      // 让右侧默认直接显示的数据是 得到的数据的 第一项 this.Cates[0] 的数据
      // 不同项的数据就不一样了 this.Cates[1 、2、3]
      let rightContent = this.Cates[0].children;
      // this.setData 是设置data中的数据
      this.setData({
        leftMenuList,
        rightContent,
      });
    });
  },
  // 左侧菜单的点击事件
  handleItemTap (e) {
    /* 
    1 获取被点击的标题身上的索引
    2 给data中的currentIndex赋值就可以了
    3 根据不同的索引来渲染右侧的商品内容
     */
    const { index } = e.currentTarget.dataset;
    // 设置右侧的商品数据，根据设置数组中不同位置的数据 this.Cates[index] 就能有不同的数据了
    let rightContent = this.Cates[index].children;
    this.setData({
      // 设置data中选中项index为传进来的index，用于添加active样式
      currentIndex: index,
      // 重新设置data中商品的数据，以展示不同的右侧商品内容
      rightContent,
      // 重新设置 右侧内容的scroll-view标签的距离顶部的距离
      scrollTopWhere: 0,
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () { },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
});
